<script setup>
import { computed } from "vue";
import useGetNavInfo from "@/hooks/useGetNavInfo.js";
import { navbarProps } from "./props";

const props = defineProps(navbarProps);

const emits = defineEmits(["iconClick"]);

//navbar高度信息
const { contentHeight, statusBarHeight, menuButtonInfo, height } =
  useGetNavInfo();

//navbar样式
const navStyle = computed(() => {
  return {
    height: height.value + "px",
    backgroundColor: props.bgColor,
    "--menu-button-width": menuButtonInfo.value.width + 10 + "px",
  };
});

//navbarContent样式
const navContentStyle = computed(() => {
  return {
    height: contentHeight.value + "px",
    lineHeight: contentHeight.value + "px",
    color: props.color,
    paddingTop: statusBarHeight.value + "px",
    fontSize: props.fontSize,
  };
});

//返回按钮图标
const backIcon = computed(() => {
  if (props.backIcon) {
    return props.backIcon;
  }
  //页面栈大于1时显示返回按钮,否则显示home按钮
  if (getCurrentPages().length > 1) {
    return "https://hellosanbao.oss-cn-hangzhou.aliyuncs.com/back.png";
  } else {
    return "https://dh-app-static.herbalifeonline.cn/prod/miniappprod/homeBack.png";
  }
});
</script>

<template>
  <view :style="{ height: height + 'px' }">
    <view class="g-nav-wrapper" :style="navStyle">
      <view :style="navContentStyle" class="g-nav-content flex items-center">
        <view class="g-nav-content-left flex items-center">
          <image
            @click="$emit('iconClick')"
            class="g-nav-icon expand-click"
            :src="backIcon"
          />
        </view>
        <view class="g-nav-content-center flex-1 line-clamp-1">{{
          props.title
        }}</view>
        <view class="g-nav-content-right"></view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.g-nav-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box1;
}
.g-nav-content-center {
  flex: 1;
  text-align: center;
}
.g-nav-content-left {
  width: var(--menu-button-width);
  height: 100%;
}
.g-nav-content-right {
  width: var(--menu-button-width);
  height: 100%;
}
.g-nav-icon {
  width: 58rpx;
  height: 58rpx;
  margin-left: 28rpx;
}
</style>
